<template>
	<div>
		<el-dialog title="流程历史版本" :close-on-click-modal="false" v-model="state.visible" width="95%" @close="refreshEmit">
			<el-table :data="state.processlistHis" stripe v-loading="state.loading" ref="processlistHisTable" @current-change="selectionChangeHandle" highlight-current-row="true" border>
				<el-table-column type="index" label="序号"></el-table-column>
				<el-table-column prop="id" label="编号" show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="deploymentId" label="部署编号" show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="name" label="流程名称" show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="version" width="80" label="版本号"></el-table-column>
				<el-table-column prop="deployTime" label="更新时间"  width="140" ></el-table-column>
				<el-table-column prop="username" width="80" label="更新人"></el-table-column>
				<el-table-column  width="80" label="操作">
					<template #default="scope">
						<el-button type="primary" link @click="viewMap(scope.row)">查看</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				:pager-count="5"
				:page-sizes="[10, 50, 200]"
				v-model:current-page="state.pageParam.page"
				background
				v-model:page-size="state.pageParam.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="state.total" small>
			</el-pagination>
			<div class="tabsBackground">
				<p class="titleP">
					<span class="title-bole">流程图</span>
				</p>
				<iframe v-show="state.iframeState" id="show-iframe2"  frameborder=0 name="showHere2" scrolling=auto :src="state.src2" width="100%" height="300px"></iframe>
			</div>
		</el-dialog>
	</div>
</template>
<script setup lang="ts" name="deployVerHis">
import { reactive } from 'vue'
import { workflowApi } from '/@/api/sys/workflow-api'

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refreshDataList']);
const state = reactive({
	visible: false,
	loading: false,
	processlistHis: [],
	total: 0,
	src2: '',
	pageParam: {
		page: 1,
		pageSize: 10,
		param: {
			key: '',
		}
	},
	iframeState: true,
})
// 打开弹窗
const openDialog = (processDefinitionId: string, key: string, deploymentId: string) => {
	state.pageParam.param.key=key
	state.visible = true
	loaddata()
}
const loaddata = () => {
	workflowApi.getModelDeployHisList(state.pageParam).then((data) => {
		state.processlistHis = data.data.records
		state.loading = false
		state.total = data.data.totalRow
	})
}
const viewMap = (row: any) => {
	state.src2 = import.meta.env.VITE_API_URL + '/activiti/diagram-viewer/index.html?processDefinitionId=' + row.id + '&processInstanceId=' + ''
}
// 关闭弹窗
const closeDialog = () => {
	state.visible = false;
}
// 分页改变
const onHandleSizeChange = (val: number) => {
	state.pageParam.pageSize = val
	loaddata()
}
// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.pageParam.page = val
	loaddata()
}
const refreshEmit = () => {
	closeDialog()
	emit('refreshDataList')
}
const selectionChangeHandle = (currentRow, oldCurrentRow) => {

}
// 暴露变量
defineExpose({
	openDialog
})
</script>